<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  
  <title th:text="#{login.loginPage}">登录页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <link rel="stylesheet" href="/layui/css/layui.css">
<style>
body {
    background-color: #e7e7e7;
}

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #fff;
    background-color: transparent;

}

.admin-login-background {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
}

.admin-header {
    margin-top: -100px;
    margin-bottom: 20px;
}

.admin-logo {
    width: 280px;
}

.admin-button {
    margin-top: 20px;
}

.admin-input {

    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    height: 50px;
    width: 300px;
    padding-bottom: 0px;
}


.admin-input-username {
    border-top-style: solid;
    border-radius: 10px 10px 0 0;
}

.admin-input-verify {
    border-radius: 0 0 10px 10px;
}

.admin-button {
    width: 300px;
    height: 50px;
    border-radius: 4px;
    background-color: #2d8cf0;
}

.admin-icon {
    margin-left: 260px;
    margin-top: 10px;
    font-size: 30px;
}

i {
    position: absolute;
}

.admin-captcha {
    position: absolute;
    margin-left: 205px;
    margin-top: -40px;
}

</style>
</head>
<body>
<div id="container">
    <div>
        <a class="layui-btn layui-btn-sm layui-btn-normal"
				href="/?lang=en_US">English(US)</a> <a
				class="layui-btn layui-btn-sm layui-btn-normal" href="/?lang=zh_CN">简体中文</a>
			<a class="layui-btn layui-btn-sm layui-btn-normal"
				href="/?lang=DE_DE">Deutsch</a> <a
				class="layui-btn layui-btn-sm layui-btn-normal" href="/?lang=ja_JP">日本語</a>
			
        </div>
    <div class="admin-login-background">
        
        <form class="layui-form" id="form" lay-filter="first">
            <div>
                <i class="layui-icon layui-icon-username admin-icon admin-icon-username"></i>
                <input type="text" name="username" placeholder="请输入用户名"
                       autocomplete="off"
                       lay-verify="required|userName"
					required th:placeholder="#{login.placeholder.username}"
                       class="layui-input admin-input admin-input-username">
            </div>
            <div>
                <i class="layui-icon layui-icon-password admin-icon admin-icon-password"></i>
                <input type="password" name="password"
                       placeholder="请输入密码"
                       autocomplete="off"
                       lay-verify="required|pass"
					   th:placeholder="#{login.placeholder.password}"
                       class="layui-input admin-input">
            </div>
            <button th:text="#{login.login}" class="layui-btn admin-button"id="send" lay-submit lay-filter="*">登录</button>

        </form>
    </div>
</div>

<script src="/layui/jquery-2.1.4.js"></script>
<script src="/layui/layui.js"></script>
<script src="./js/base64.js"></script>

<script>
var	tokenc	=	systemInit();
layui.use('form', function(){
  var form = layui.form;
  
  //自定义验证规则
  form.verify({
	  pass: [/(.+){6,12}$/, '[[#{login.alerterror}]]']
    
  });
  
  //监听提交
  form.on('submit(*)', function(data){
    console.log(data)
    return false;
  });
  
});
$('#send').click(function() {
	//console.log($("#form").serialize());
	
	var data = $.param(GetRequest()) + '&' + $("#form").serialize();
	console.log(data);
	$.ajax({
		type: "POST", //GET或POST,
		async:true, //默认设置为true，所有请求均为异步请求。
		url: "/js/petUser/login_post",
		data: data,
		dataType: "text", //xml、html、script、jsonp、text
		success: function(data) {
			var json = JSON.parse(data);
			console.log(json,json.data.info);
			switch(json.data.result)
			{
			case 400:
				alert($(".notexist").text());
			  break;
			case 500:
				alert($(".wrongpassword").text());
			  break;
			case 200:
				window.location.href="/customer?username="+json.data.username+"&lang="+json.header.message;
				break;
			case 100:
				window.location.href='/requestCustomerService?username='+json.data.username+"&p="+json.p
						+'&token='+tokenc+'&platForm=apple&area='+json.header.message
				break;
			}
		},
		error:function(data){console.log(data)},
	});
});
function GetRequest() {  
	   var url = location.search; //获取url中"?"符后的字串  
	   var theRequest = new Object();  
	   if (url.indexOf("?") != -1) {  
	      var str = url.substr(1); 
	      strs = str.split("&");  
	      for(var i = 0; i < strs.length; i ++) {  
	         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
	      }  
	   }  
	   return theRequest;  
	}
function	systemInit(){
	var	res;
	$.ajax({
		type: "POST",
		async:false,
		url: "http://119.29.172.17:8080/systemInit",
		dataType: "json", 
		success: function(data) {
			res=data.data;
			//authentication_login(res)
		},
		error:function(){},
	});
	return	res;
}

function	authentication_login(token){
	var	res;
	console.log(token)
	$.ajax({
		type: "POST",
		async:true,
		data:{
			username:'26389124@qq.com',
			password:'123456'
		},
		url: "http://119.29.172.17:8080/authentication/login",
		dataType: "json",
		beforeSend: function (xhr){
			xhr.setRequestHeader('x-auth-token',token);
		},
		complete:function(xhr,data){
			//console.log(xhr/* .getResponseHeaders('x-auth-token') */);
			console.log(xhr.getResponseHeader('X-auth-token'));
		},
		success: function(data) {
			console.log(data);
			res=data.data;
		},
		error:function(){},
	});
	return	res;
}
</script>


<script>
layui.use('jquery', function(){
  var $ = layui.jquery;
  var submit = function(){
    return false;
  };
  $('#test').on('submit', function(){
     return false
  });
  $('#test').on('submit', function(){
     return true
  });
});
</script>
</body>
<p class="notexist" hidden="true"  style="color: #FFB800;" th:text="#{login.notexist}"></p>
<p class="wrongpassword" hidden="true" style="color: #FFB800;" th:text="#{login.wrongpassword}"></p>

</html>
